<template>
	<div class="w750 " :class="[bgWhite?'white-bg':'' , themes.theme]">
	<!-- <div class="w750" :class="'white-bg':!Nomsg1||!Nomsg2"> -->
		<!-- 积分商城 -->
		<div class="pre-deposit">
			<div class="m-tabs">
				<span :class="index==action?'item line-on':'item'" v-for="(item,index) in tabTitle" :key="index" @click="tab(index)">
                    <span class="txt">{{item}}</span>
                </span>
			</div>
			<!-- banner -->
			<div class="banner" v-if="action==0">
				<ul class="img clearfix">
					<li><img src="../../assets/images/integral-img.jpg" alt=""></li>
				</ul>
			</div>
			<!-- /banner -->
            <router-link to="/myIntegral" v-if="action==0">
                <div class="integral-balance">
                    <span class="num" :style="{'color':themes.color}"><em class="bal" :style="{'color':themes.color}">{{integralIndexData.score?integralIndexData.score:'----'}}</em>积分</span>
                    <span class="arr" v-if="isLogin">查看详情<img src="../../assets/images/arrow.png" alt=""></span>
                    <span class="arr" v-if="!isLogin">您还未登录，请先登录<img src="../../assets/images/arrow.png" alt=""></span>
                </div>
            </router-link>
			<div class="integral-goods">
                <!-- 首页--优惠卡券 -->
				<div class="goods-tit" v-if="action==0&&!Nomsg1">优惠卡券</div>
				<div class="pro-list" v-if="action==0&&!Nomsg1">
					<div class="pro-box" v-for="(item,index) in integralIndexData.integralCouponList" :key="index">
						<span  class="pro-info" @click="integralCoupon(index)">
							<div class="pro-img"><img :src="item.couponPic?$imgUrlHead+item.couponPic:require('../../assets/images/default-goods-img.jpg')" alt=""></div>
							<div class="pro-name">{{item.couponName}}</div>
							<span class="integral-price">
								<span class="price-span"><span class="price">{{item.needPoints}}</span>积分</span>
								<span class="price-span"><span class="num">{{item.bindCouponNumber}}</span>人兑换</span>
							</span>
						</span>
					</div>
				</div>
                <!-- /首页--优惠卡券 -->

                <!-- 首页--热门兑换 -->
				<div class="goods-tit" v-if="action==0&&!Nomsg2">热门兑换</div>
				<div class="pro-list" v-if="action==0&&!Nomsg2">
                    <div class="pro-box" v-for="(item,index) in integralIndexData.integralProdList" :key="index">
						<span class="pro-info" @click="toIntegralGoodsDet(index)">
                            <div class="pro-img"><img :src="item.prodImage?$imgUrlHead+item.prodImage:require('../../assets/images/default-goods-img.jpg')" alt=""></div>
							<div class="pro-name">{{item.name}}</div>
							<span class="integral-price">
								<span class="price-span"><span class="price">{{item.exchangeIntegral}}</span>积分</span>
								<span class="price-span"><span class="num">{{item.saleNum}}</span>人兑换</span>
							</span>
						</span>
					</div>
				</div>
                <!-- /首页--热门兑换 -->

                <!-- 优惠卡券 -->
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" v-if="action===1&&!Nomsg1">
                    <div class="pro-list">
                        <div class="pro-box" v-for="(item,index) in CouponData.resultList" :key="index">
                            <span class="pro-info" @click="integralCoupon(index)">
                                <div class="pro-img"><img :src="item.couponPic?$imgUrlHead+item.couponPic:require('../../assets/images/default-goods-img.jpg')" alt=""></div>
                                <div class="pro-name">{{item.couponName}}</div>
                                <span class="integral-price">
                                    <span class="price-span"><span class="price">{{item.needPoints}}</span>积分</span>
                                    <span class="price-span"><span class="num">{{item.bindCouponNumber}}</span>人兑换</span>
                                </span>
                            </span>
                        </div>
                    </div>
                </van-list>
                <!-- /优惠卡券 -->

                <!-- 热门兑换 -->
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" v-if="action==2&&!Nomsg2">
                    <div class="pro-list">
                        <div class="pro-box" v-for="(item,index) in hotProdData.resultList" :key="index">
                            <span class="pro-info" @click="toIntegralGoodsDet(index)">
                                <div class="pro-img"><img :src="item.prodImage?$imgUrlHead+item.prodImage:require('../../assets/images/default-goods-img.jpg')" alt=""></div>
                                <div class="pro-name">{{item.name}}</div>
                                <span class="integral-price">
                                    <span class="price-span"><span class="price">{{item.exchangeIntegral}}</span>积分</span>
                                    <span class="price-span"><span class="num">{{item.saleNum}}</span>人兑换</span>
                                </span>
                            </span>
                        </div>
                    </div>
                </van-list>
                <!-- /热门兑换 -->

                <!-- 精品优选 -->
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" v-if="action==3&&!Nomsg2">
                    <div class="pro-list">
                        <div class="pro-box" v-for="(item,index) in commendProdData.resultList" :key="index">
                            <span class="pro-info" @click="toIntegralGoodsDet(index)">
                                <div class="pro-img"><img :src="item.prodImage?$imgUrlHead+item.prodImage:require('../../assets/images/default-goods-img.jpg')" alt=""></div>
                                <div class="pro-name">{{item.name}}</div>
                                <span class="integral-price">
                                    <span class="price-span"><span class="price">{{item.exchangeIntegral}}</span>积分</span>
                                    <span class="price-span"><span class="num">{{item.saleNum}}</span>人兑换</span>
                                </span>
                            </span>
                        </div>
                    </div>
                </van-list>
                <!-- /精品优选 -->
			</div>
		<!-- /积分商城 -->
		</div>
        <Noempty :pic="require('../../assets/images/record-empty.png')" :title="'没有相关记录'" v-if="(action==0 && Nomsg1 && Nomsg2) || (action==1 && Nomsg1) || (action==2 && Nomsg2) || (action==3 && Nomsg2)"/>
	</div>
</template>

<script>
import { List } from "vant";
import Noempty from 'components/Noempty/Noempty';
import {tokenManage} from 'utils/Cache';
import {mapState} from 'vuex'
import { integralIndex,integralCouponList,hotIntegralProdList,commendIntegralProdList } from 'api/pointsApi';
import { receive } from 'api/coupon';
export default {
	components: {
		Noempty,
 	} ,
	data () {
		return {
             
			Nomsg1: false,//没有优惠卡券时，值为true
			Nomsg2: false,//没有热门兑换、精品优先积分商品时，值为true
			action:0,//点击tab时获取的索引
			tabTitle: ['全部','优惠卡券','热门兑换','精品优选'],//设置tab显示的内容
			logType:'',//用于给明细名称赋值
            curPageNO:'1',//integralCouponList、hotIntegralProdList、commendIntegralProdList接口的请求参数
            integralIndexData:{},//integralIndex接口的响应参数
            CouponData:{},//integralCouponList接口获取积分优惠券列表的响应参数
            hotProdData:{},//hotIntegralProdList接口获取热门兑换列表的响应参数
            commendProdData:{},//commendIntegralProdList接口获取精品优选列表的响应参数
			loading: false,//下拉加载时用
            finished: false,//下拉加载时用
            isLogin: tokenManage.isLogin(),//判断有没有登录
			bgWhite: false,//判断是否启动白色背景的class
		}
    },
    mounted () {
      let that = this

      this.mountedIndex()
    },

    methods: {
        //页面加载时mounted里的方法
        mountedIndex(){
            integralIndex().then(res=>{
                this.integralIndexData=res.result
				if (res.status==1) {
					if (this.integralIndexData.integralCouponList.length==0) {
						this.Nomsg1 = true
					}
					if (this.integralIndexData.integralProdList.length==0) {
						this.Nomsg2 = true
					}
				}else{
					this.Nomsg1 = true
					this.Nomsg2 = true
					this.$toast({duration: 1000,message:res.msg})
				}
				this.whiteBg()//action=0时，没有数据时执行白色背景
			}
			),()=>{this.$toast('网络请求异常')}
        },
        //返回
        goback() {
            this.$router.back();
            this.$router.isBack = true
        },
        tab(index){
            this.action=index
            if (this.action==0) {
		        this.Nomsg1=false,//如果不加这句，当某一个tab没内容且点击它后，点击另一个没内容的tab时，会不能显示数据
		        this.Nomsg2=false,//如果不加这句，当点击‘精品优先’的Nomsg2为true时，再点击‘全部’，会出现明明‘热门兑换’有商品，却显示为空的情况
                this.mountedIndex()
            } else if(this.action==1){
                this.initialize()
                integralCouponList({curPageNO:this.curPageNO}).then(res =>{
                    if(res.status==1){
                        this.CouponData=res.result
						if (this.CouponData.total==0) {
							this.Nomsg1 = true
						}
                    }else{
						this.Nomsg1 = true
						this.$toast({duration: 1000,message:res.msg})
					}
					this.whiteBg()//action=1，2，3时，没有数据时执行白色背景
				}),()=>{this.$toast('网络请求异常')}
            }else if(this.action==2){
                this.initialize()
                hotIntegralProdList({curPageNO:this.curPageNO}).then(res =>{
                    if(res.status==1){
						this.hotProdData=res.result
						if (this.hotProdData.total==0) {
							this.Nomsg2 = true
						}
                    }else{
                        this.Nomsg2=true
						this.$toast({duration: 1000,message:res.msg})
                    }
					this.whiteBg()//action=1，2，3时，没有数据时执行白色背景
                }),()=>{this.$toast('网络请求异常')}
            }else if(this.action==3){
                this.initialize()
                commendIntegralProdList({curPageNO:this.curPageNO}).then(res =>{
                    if(res.status==1){
                        this.commendProdData=res.result
						if (this.commendProdData.total==0) {
							this.Nomsg2 = true
						}
                    }else{
                        this.Nomsg2=true
						this.$toast({duration: 1000,message:res.msg})
                    }
					this.whiteBg()//action=1，2，3时，没有数据时执行白色背景
                }),()=>{this.$toast('网络请求异常')}
            }

        },
        //积分换优惠卷
        integralCoupon(index){
            if (this.action==0) {
                // if (this.integralIndexData.score>=this.integralIndexData.integralCouponList[index].needPoints) {
                    this.$dialog.confirm({title: "积分兑换",message: "您确定要用积分兑换优惠卷吗？"}).then(() => {
                    receive({couponId:this.integralIndexData.integralCouponList[index].couponId}).then(res => {
                        if (res.status == 1) {
                            this.$toast(res.result.msg)
                            this.mountedIndex()
                        } else {
                            this.$toast({duration: 1000,message:res.msg})
                        }
                    });
                    }).catch(() => {
                    //// on cancel
                    });
            } else if (this.action==1) {
                // if (this.integralIndexData.score>=this.CouponData.resultList[index].needPoints) {
                    this.$dialog.confirm({title: "积分兑换",message: "您确定要用积分兑换优惠卷吗？"}).then(() => {
                    receive({couponId:this.CouponData.resultList[index].couponId}).then(res => {
                        if (res.status == 1) {
                          this.$toast(res.result.msg)
                            this. tab(1)
                        } else {
                            this.$toast({duration: 1000,message:res.msg})
                        }
                    });
                    }).catch(() => {
                    //// on cancel
                    });
            }
        },
        //点击商品跳转至积分商品详情页面
        toIntegralGoodsDet(index){
            if (this.action==0) {
                this.$router.push({
                    path: `/pointsGoodsDetail`,
                    query: {
                        id: this.integralIndexData.integralProdList[index].id
                    }
                });
            } else if(this.action==2){
                this.$router.push({
                    path: `/pointsGoodsDetail`,
                    query: {
                        id: this.hotProdData.resultList[index].id
                    }
                });
            } else if(this.action==3){
                this.$router.push({
                    path: `/pointsGoodsDetail`,
                    query: {
                        id: this.commendProdData.resultList[index].id
                    }
                });
            }
        },
        onLoad() {//vant-list下拉加载方法
            setTimeout(() => {
                if (this.action==1) {
                    if (this.CouponData.resultList.length >= this.CouponData.total) {
                        this.loading = false
                        this.finished = true
                    } else {
                        this.curPageNO++
                        integralCouponList({curPageNO:this.curPageNO}).then(res=> {
                            for (let i = 0; i < res.result.resultList.length; i++) {// res.result.resultList.length:当前页面数组长度
                            this.CouponData.resultList.push(res.result.resultList[i])
                            }
                            // 加载状态结束
                            this.loading = false;
                        })
                    }
                } else if(this.action==2){
                    if (this.hotProdData.resultList.length >= this.hotProdData.total) {
                        this.loading = false
                        this.finished = true
                    } else {
                        this.curPageNO++
                        hotIntegralProdList({curPageNO:this.curPageNO}).then(res=> {
                            for (let i = 0; i < res.result.resultList.length; i++) {// res.result.resultList.length:当前页面数组长度
                            this.hotProdData.resultList.push(res.result.resultList[i])
                            }
                            // 加载状态结束
                            this.loading = false;
                        })
                    }
                } else if(this.action==3){
                    if (this.commendProdData.resultList.length >= this.commendProdData.total) {
                        this.loading = false
                        this.finished = true
                    } else {
                        this.curPageNO++
                        commendIntegralProdList({curPageNO:this.curPageNO}).then(res=> {
                            for (let i = 0; i < res.result.resultList.length; i++) {// res.result.resultList.length:当前页面数组长度
                            this.commendProdData.resultList.push(res.result.resultList[i])
                            }
                            // 加载状态结束
                            this.loading = false;
                        })
                    }
                }
            }, 500);
        },

		//初始化
        initialize() {
            this.curPageNO = 1
            this.CouponData = {}  //清除数组数据
            this.hotProdData = {}  //清除数组数据
            this.commendProdData = {}  //清除数组数据
            this.finished = false  //重置判断更多
			this.Nomsg1=false//如果不加这句，当某一个tab没内容且点击它后，点击另一个没内容的tab时，会不能显示数据
			this.Nomsg2=false//如果不加这句，当点击‘精品优先’的Nomsg2为true时，再点击‘热门商品’，会出现明明‘热门兑换’有商品，却显示为空的情况
        },

		//当Noempty出现时，让背景变白
		whiteBg(){
			if (this.action==1&&this.Nomsg1) {
				this.bgWhite=true
			}else if (this.action==2&&this.Nomsg2) {
				this.bgWhite=true
			}else if (this.action==3&&this.Nomsg2) {
				this.bgWhite=true
			}else if (this.action==0&&this.Nomsg1&&this.Nomsg2) {
				this.bgWhite=true
			}else{
				this.bgWhite=false
			}
		}
    },
    computed: {
        ...mapState(['themes']),
    },
}
</script>

<style src="../../assets/css/pre-deposit.css" scoped></style>